<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-odometer"></i> 查询条件</span></div>
          <div style="height: 60px">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
            <el-form-item label="页面类型" prop="pageType">
              <el-select v-model="queryParams.pageType" placeholder="全部" clearable>
                <el-option v-for="dict in dict.type.page_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="最近" prop="lastDateNum">
              <el-input-number v-model="queryParams.lastDateNum" controls-position="right" :min="1" :max="24" />
            </el-form-item>
            <el-form-item prop="dateType">
              <el-select v-model="queryParams.dateType" placeholder="请选择" clearable>
                <el-option v-for="dict in dict.type.date_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div style="float:right">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-pie-chart"></i> 地区占比</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="regionpercent" style="height: 380px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="16" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-monitor"></i> 访问量</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="accesscount" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAccessData } from "@/api/monitor/accessLog";
import * as echarts from "echarts";
import {getWeekStartDate, getDayStartDate, getMonthStartDate} from "@/utils/kefai/date";

export default {
  name: "AccessInfo",
  dicts: [
    'page_type',
    'date_type',
  ],
  data() {
    return {
      // 区域占比
      regionpercent: null,
      // 访问量
      accesscount: null,
      // 访问统计信息
      accessstats: {},

      queryParams: {
        pageType: undefined,
        lastDateNum: undefined,
        dateType: undefined,
      },

      dateRange: [],

      accesscountname: [],
      accesscountvalue: [],
    }
  },
  created() {
    this.getData();
    this.openLoading();
  },
  methods: {
    getData() {
      if (this.queryParams.lastDateNum === 'undefined') {
        this.dateRange = [];
      } else {
        if (this.queryParams.dateType === 'day') {
          this.dateRange[0] = getDayStartDate(this.queryParams.lastDateNum);
        } else if (this.queryParams.dateType === 'week') {
          this.dateRange[0] = getWeekStartDate(this.queryParams.lastDateNum);
        } else if (this.queryParams.dateType === 'month') {
          this.dateRange[0] = getMonthStartDate(this.queryParams.lastDateNum);
        } else {
          this.dateRange[0] = undefined;
        }
        this.dateRange[1] = new Date();
      }
      getAccessData(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        const accessData = response.data;
        console.log(accessData);
        console.log(accessData.totalNumGroupByTime);
        if(accessData.totalNumGroupByTime === undefined || accessData.totalNumGroupByTime === null) {
            // 没有统计数据 取所有的统计数据
            this.accesscountname = [];
            this.accesscountvalue = [];
            this.accesscountname.push('所有');
            this.accesscountvalue.push(accessData.totalNum);
        } else {
          this.accesscountname = accessData.totalNumGroupByTime.map(data => data.name);
          this.accesscountvalue = accessData.totalNumGroupByTime.map(data => data.value);
        } 

        this.$modal.closeLoading();

        this.regionpercent = echarts.init(this.$refs.regionpercent, "macarons");
        this.regionpercent.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          series: [
            {
              name: "地区",
              type: "pie",
              roseType: "radius",
              radius: [15, 95],
              center: ["50%", "38%"],
              data: response.data.totalNumGroupByRegion,
              animationEasing: "cubicInOut",
              animationDuration: 1000,
            }
          ]
        });

        this.accesscount = echarts.init(this.$refs.accesscount, 'macarons');
        this.accesscount.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 10,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: this.accesscountname,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            }
          }],
          series: [{
            name: '访问量',
            type: 'bar',
            stack: 'vistors',
            barWidth: '10%',
            data: this.accesscountvalue,
            animationDuration: 1000,
          },{
            data: this.accesscountvalue,/* 这里要和第一组数据一样、才能保持在最高处*/
            type: 'line',
            symbol: 'circle',//拐点样式
            symbolSize: 8,//拐点大小
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,//折线宽度
                  color: "#27dba0"//折线颜色
                },
                color: '#27dba0',//拐点颜色
                borderColor: '#fff',//拐点边框颜色
                borderWidth: 2//拐点边框大小
              },
              emphasis: {
                color: '#4CCEFE'//hover拐点颜色定义
              }
            },
          },
          ]
        });

      })
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载网站访问统计数据，请稍候！");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getData();
      this.openLoading();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>